<template>
    <DialogVue :data="dialog" @close="dialogClose(formRef)">
        <template #content>
            <div>
                <div class="box">
                    <el-form ref="formRef" :rules="customStyleRules" :model="customStyle" label-width="auto">
                        <el-form-item label="主题：" prop="theme">
                            <el-select v-model="customStyle.theme" placeholder="请选择主题" style="margin-right: 10px">
                                <el-option
                                    :label="item.label"
                                    :value="item.value"
                                    v-for="item in DICT_DATA.get('theme')"
                                    :key="item.value"
                                >
                                    {{ item.label }}
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="首页宣传图：" prop="homeBanner">
                            <div class="banner" v-if="customStyle.homeBanner">
                                <img :src="customStyle.homeBanner" alt="" />
                                <div class="shadow">
                                    <el-icon @click="onRemove"><Delete /></el-icon>
                                </div>
                            </div>
                            <UploadFile
                                v-else
                                dirType="wxmini"
                                fileType="image"
                                style="width: 100px; height: 100px"
                                sizeRatio="[16, 9]"
                                :public="true"
                                @change="
                                    (obj: any) => {
                                        console.log('obj', obj)
                                        customStyle.homeBanner = obj.url
                                    }
                                "
                            ></UploadFile>
                        </el-form-item>
                    </el-form>
                </div>
                <!-- <JsonEditorVue v-model="dialog.styleInfo" style="width: 100%" /> -->
                <div style="display: flex; justify-content: center; margin: 10px">
                    <el-button @click="dialogClose(formRef)">取消</el-button>
                    <el-button type="primary" @click="dialogConfirm(formRef)"> 确定 </el-button>
                </div>
            </div>
        </template>
    </DialogVue>
</template>
<script setup lang="ts">
import DialogVue from '@/components/baseDialog/Index.vue'
import JsonEditorVue from 'json-editor-vue'
import { reactive, ref, watchEffect } from 'vue'
import UploadFile from '@/components/form/upload.vue'
import { DICT_DATA } from '@/utils/dict-data'
import { FormInstance } from 'element-plus'

const dialog = reactive({
    title: '编辑风格',
    visible: false,
    width: '700px',
    styleInfo: ''
})
const formRef = ref()
const customStyle = reactive({
    theme: '',
    homeBanner: ''
})
const customStyleRules = reactive({
    theme: [{ required: true, message: '请选择主题', trigger: 'change' }],
    homeBanner: [{ required: true, message: '请上传宣传图', trigger: 'banner' }]
})

const props = defineProps(['styleInfo', 'visible'])
const emits = defineEmits(['close', 'confirm'])

watchEffect(() => {
    dialog.styleInfo = props.styleInfo
    dialog.visible = props.visible
    console.log('props.styleInfo', props.styleInfo)
    if (props.styleInfo && props.visible) {
        customStyle.theme = props.styleInfo.theme
        customStyle.homeBanner = props.styleInfo.homeBanner
    }
})
const onRemove = () => {
    customStyle.homeBanner = ''
}
const dialogClose = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    emits('close')
    formEl.resetFields()
}
const dialogConfirm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('customStyle', customStyle)
            emits('confirm', customStyle)

            formEl.resetFields()
        }
    })
}
</script>

<style scoped lang="scss">
.box {
    .banner {
        position: relative;
        width: 100px;
        height: 100px;
        img {
            width: 100%;
            height: 100%;
            display: block;
        }
        &:hover {
            cursor: pointer;
            .shadow {
                opacity: 1;
            }
        }
        .shadow {
            opacity: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(0, 0, 0, 0.35);
            position: absolute;
            top: 0;
            left: 0;
            color: #fff;
            font-size: 24px;
        }
    }
}
</style>
